<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <form class="layui-form " action="">
            <div class="layui-form-item">
                <label class="layui-form-label">key</label>
                <div class="layui-input-inline">
<!--                    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">-->
                    <div id="demo1"></div>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">value</label>
                <div class="layui-input-block">
                    <textarea placeholder="" class="layui-textarea"  name="val" id="val" value=""></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" type="button" lay-submit="" lay-filter="demo1">保存</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="/js/xm-select.js" charset="utf-8"></script>
<script>
    checkLogin()
    layui.use(['jquery', 'form', 'layedit'], function () {
        var  $ = layui.jquery
            ,form = layui.form;
        $.ajax('/admin/etcd/key/list', {
            method: 'post',
            dataType: 'json',
            success: function (res) {
                if (parseInt(res.code) == 0) {
                    var data = []
                    $.each(res.data,function (i,v) {
                        data[i] = {name:v.key, value:v.key}
                    })
                    var demo1 = xmSelect.render({
                        el: '#demo1',
                        language: 'zn',
                        size: 'medium',
                        filterable: true,
                        radio: true,
                        clickClose: true,
                        model: {
                            icon: 'hidden',
                            label: {
                                type: 'text',
                                text: {
                                    //左边拼接的字符
                                    left: '',
                                    //右边拼接的字符
                                    right: '',
                                    //中间的分隔符
                                    separator: ', ',
                                },
                            }
                        },
                        //搜索回调
                        // remoteMethod: function (val, cb, show, pageIndex) {
                        //
                        // },
                        paging: true,
                        pageSize: 10,
                        data:data,
                        on: function(data){
                            if(data.arr[0].name == undefined) {
                                layer.msg(res.msg, {time: 2000, icon: 2, shade: 0.01});
                                return
                            }
                            $.ajax('/admin/etcd/get', {
                                method: 'post',
                                data:{key:data.arr[0].name},
                                dataType: 'json',
                                success: function (res) {
                                    $("#val").val(res.data.val)
                                }
                            })
                        },
                    })
                } else {
                    layer.msg(res.msg, {time: 2000, icon: 2, shade: 0.01});
                }

            }
        })

        //监听提交
        form.on(`submit(demo1)`, function (formData) {
            $.ajax('/admin/etcd/set', {
                method: 'post',
                data:{key:formData.field.select,value:formData.field.val},
                dataType: 'json',
                success: function (res) {
                    if (parseInt(res.code) == 0) {
                        layer.msg("保存成功")
                    }else {
                        layer.msg(res.msg, {time: 2000, icon: 2, shade: 0.01});
                    }
                }
            })
        })


    })
</script>
